<template>
  <div class="file-detail sub-margin">
    <div class="sub-page-title sub-page-return">
      <el-button size="small" icon="el-icon-arrow-left" @click.stop="returnPage">返回</el-button>
      {{ type === '4' ? '制度文件' : '工作通知' }}详情
    </div>
    <div class="content">
      <el-scrollbar class="main_con">
        <div class="details">
          <div class="list-con">
            <div class="li">
              <div class="li-key">信息分类</div>
              <div class="li-val">{{ menuType(item.type) }}</div>
              <div class="li-key bl">发布机构</div>
              <div class="li-val">{{ item.releaseOrgName || '-' }}</div>
            </div>
            <div class="li">
              <div class="li-key">发布人</div>
              <div class="li-val">{{ item.bulletinAuthor || '-' }}</div>
              <div class="li-key bl">来源</div>
              <div class="li-val">{{ item.source || '-' }}</div>
            </div>
          </div>
          <div class="details_con">
            <p class="details_title">{{ item.bulletinTitle }}</p>
            <div class="information">
              <div class="infor_item">
                <span class="label_item">发布时间：</span>
                {{ item.releaseDateH || '-' }}
              </div>
              <div class="infor_item">
                <span class="label_item">阅读次数：</span>
                {{ item.readCount || '-' }}
              </div>
            </div>
            <div
              class="content"
              :class="[{ detail_assess: item.source == '考核通知' }]"
              v-html="item.bulletinContent"></div>
            <div class="fileList" v-if="item.fileShowVOS && item.fileShowVOS.length > 0">
              <UploadPreview
                :file-list="item.fileShowVOS"
                layout="list"
                :showDownload="item.isDownfile === 1"></UploadPreview>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import UploadPreview from '@com/UploadPreview/index.vue'
import { getBulletionDetail, saveRead } from '@apis/notice.js'
export default {
  name: 'fileDetail',
  components: { UploadPreview },
  props: {},
  data() {
    return {
      id: '',
      type: '',
      item: {},
    }
  },
  watch: {},
  computed: {},
  created() {
    const { id, type } = this.$route.params
    this.id = id || ''
    this.type = type || ''
  },
  mounted() {
    if (!this.id && sessionStorage.getItem('noticePreviewData')) {
      const data = sessionStorage.getItem('noticePreviewData')
        ? JSON.parse(sessionStorage.getItem('noticePreviewData'))
        : {}

      this.item = { ...data }
      if (localStorage.PSKH_USERINFO) {
        const userInfo = JSON.parse(localStorage.PSKH_USERINFO)
        this.item.bulletinAuthor = userInfo.userName
        this.item.releaseOrgName = userInfo.userOrgPostDTOList ? userInfo.userOrgPostDTOList[0].orgName : ''
      }
    }
    if (this.id) {
      this.initdata()
    }
  },
  methods: {
    returnPage() {
      this.$router.go(-1)
    },
    menuType(type) {
      switch (type * 1) {
        case 0:
          return '工作通知'
        case 3:
          return '工作简报'
        case 4:
          return '制度文件'
        default:
          return ''
      }
    },
    /* 初始化数据 */
    initdata() {
      saveRead({
        bulletionId: this.id,
      }).then(res => {})
      getBulletionDetail({
        bulletionId: this.id,
      }).then(res => {
        const data = res.data
        this.item = { ...data }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.file-detail {
  height: 100%;
  .content {
    flex: 1;
    // display: flex;
    // align-items: stretch;
    padding: 10px 80px;
    height: calc(100% - 80px);
    font-size: 16px;
    p,
    span,
    div,
    li {
      word-break: break-all;
      font-size: 16px;
    }
    p,
    li {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
    h1,
    h2,
    h3 {
      font-size: 28px;
    }
    .main_con {
      flex: 1;
      height: calc(100% - 25px);
      .details {
        padding: 10px 30px;
        .list-con {
          // width: 50%;
          border: 1px solid #dcdfe6;
          margin: 2px 0rem;

          .li {
            display: flex;

            &:not(:last-child) {
              border-bottom: 1px solid #dcdfe6;
            }

            .li-key {
              width: 200px;
              border-right: 1px solid #dcdfe6;
              background-color: #f9f9f9;
              padding: 10px;
              font-size: 15px;
              color: #333333;
              // line-height: 100%;
            }

            .bl {
              border-left: 1px solid #dcdfe6;
            }

            .li-val {
              flex: 1;
              padding: 10px;
              font-size: 16px;
              color: #333333;
              background-color: #ffffff;
              word-break: break-all;

              p {
                line-height: 24px;
              }

              &.ellipsis {
                position: relative;
                padding-right: 3px;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
            }
          }
        }
        .details_con {
          width: 70%;
          margin: 20px auto 0;
        }
        .details_title {
          text-align: center;
          font-size: 20px;
          word-break: break-all;
        }
        .information {
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin: 20px 0 25px;
          .infor_item {
            font-size: 15px;
            color: #6c757d;
          }
        }
        .fileList {
          margin-top: 20px;
        }
        .detail_assess {
          width: 210mm;
          margin: auto;
          overflow-x: hidden;
        }
      }
    }
  }
}
</style>
